<template>
  <v-sheet class="d-flex flex-wrap pa-2 pa-md-0 rounded-lg" color="thirdary">
    <div class="col-12 col-md-2 d-flex flex-column align-center pa-5">
      <v-avatar size="140" color="primary">
        <v-img :src="doctorInfo ? doctorInfo.avatar : ''"></v-img>
      </v-avatar>
      <v-sheet
        width="100"
        class="d-flex rounded-lg overflow-hidden mt-5"
        elevation="2"
      >
        <v-hover v-slot="{ hover }">
          <v-sheet
            :color="hover ? 'thirdary' : 'primary'"
            class="text-body-2 px-2 d-flex justify-center align-center col-6 pa-1 cur-point"
            :class="hover ? 'primary--text' : 'thirdary--text'"
            ><span>关注</span></v-sheet
          ></v-hover
        >
        <div class="d-flex justify-center align-center primary--text px-2">
          <span>158</span>
        </div></v-sheet
      >
    </div>
    <div class="col-12 col-md-7 d-flex flex-column justify-center">
      <div class="d-flex align-baseline justify-center justify-md-start">
        <span class="text-h6 primary--text">{{
          doctorInfo ? doctorInfo.name : ""
        }}</span
        ><span class="text-body-2 mx-2 fontblack--text">{{
          doctorInfo ? doctorInfo.level : ""
        }}</span
        ><v-btn outlined color="primary" height="25" width="0"
          ><i class="iconfont">&#xe61f;</i> <span>点赞</span></v-btn
        >
      </div>

      <div class="text-caption mt-1 d-flex justify-center justify-md-start">
        <v-hover v-slot="{ hover }"
          ><span
            class="pr-2 cur-point"
            :class="hover ? 'primary--text hover-underline' : 'fontblack--text'"
            >{{ doctorInfo ? doctorInfo.hospitalName : "" }}</span
          ></v-hover
        >
        <span class="fontblack--text"> ——</span>
        <v-hover v-slot="{ hover }"
          ><span
            class="pr-2 cur-point ml-2"
            :class="hover ? 'primary--text hover-underline' : 'fontblack--text'"
            >{{
              doctorInfo
                ? doctorInfo.department
                  ? doctorInfo.department.name
                  : ""
                : ""
            }}</span
          ></v-hover
        >
      </div>

      <div class="d-flex flex-wrap justify-center justify-md-start">
        <v-btn
          small
          class="mr-1 cur-point mt-1 d-flex"
          v-for="(disease, index) in doctorInfo ? doctorInfo.illnesses : []"
          color="primary"
          :key="index"
          >{{ disease ? disease.name : "" }}</v-btn
        >
      </div>
      <div
        class="text-caption mt-3 cur-point fontblack--text"
        :title="doctorInfo ? doctorInfo.speciality : ''"
      >
        <span> {{ specialityBrief }}</span
        ><span class="ml-2 primary--text">更多</span>
      </div>
      <div
        class="text-caption mt-3 cur-point fontblack--text"
        :title="doctorInfo ? doctorInfo.intro : ''"
      >
        <span> {{ curriculumVitae }}</span
        ><span class="ml-2 primary--text">更多</span>
      </div>
    </div>
    <div class="col-12 col-md-3">
      <div class="d-flex justify-center flex-wrap">
        <div
          class="col-3 col-md-6 col-lg-3 d-flex flex-column align-center"
          v-for="(item, index) in selectes"
          :key="index"
        >
          <v-hover v-slot="{ hover }">
            <v-sheet
              outlined
              elevation="2"
              :color="hover ? 'primary' : 'thirdary'"
              width="40"
              height="40"
              class="d-flex justify-center align-center cur-point rounded-circle"
              @click.stop="item.methods()"
              ><span
                class="iconfont"
                :class="hover ? 'fontwhite--text' : 'primary--text'"
                style="font-size: 1.7rem"
              >
                {{ item.icon }}</span
              ></v-sheet
            >
          </v-hover>
          <div class="text-caption mt-1 fontblack--text">{{ item.text }}</div>
        </div>
      </div>
      <div class="d-flex justify-center align-end mt-4">
        <v-rating
          v-model="rating"
          background-color="thirdary"
          half-increments
          small
        ></v-rating>
        <div class="d-flex justify-start align-center text-h5 primary--text">
          <span>{{ doctorInfo ? doctorInfo.rating : 0 }}</span>
        </div>
      </div>
      <div class="d-flex justify-center text-body-2 mt-4 flex-wrap">
        <div
          class="col-6 col-md-12 col-lg-6 d-flex align-baseline justify-center"
        >
          <span class="fontblack--text">预约量</span
          ><span class="primary--text text-h5 ml-2">3223</span>
        </div>
        <div
          class="col-6 col-md-12 col-lg-6 d-flex align-baseline justify-center"
        >
          <span class="fontblack--text">问诊量</span
          ><span class="primary--text text-h5 ml-2">883</span>
        </div>
      </div>
    </div>
  </v-sheet>
</template>



<script>
import { mapMutations, mapState } from "vuex";
import eventBus from "../../eventBus/eventBus";
export default {
  props: {
    doctorInfo: Object,
  },
  data() {
    return {
      rating: 3.5,
      selectes: [
        { id: 1, icon: "\ue60a", text: "挂号", methods: this.openRegistration },
        { id: 2, icon: "\ue7e7", text: "图文", methods: this.openMessage },
        { id: 3, icon: "\ue614", text: "视化", methods: this.openMessage },
        { id: 4, icon: "\ue69e", text: "服务包", methods: this.openMessage },
      ],

      doctor: {
        name: "医生姓名",
        lever: "主任医师/教授",
        hospital: "上海儿童医学中心",
        department: "儿内科",
        diseases: [
          "哮喘",
          "肺炎",
          "秋季腹泻",
          "上呼吸道感染",
          "胃肠炎",
          "病毒性脑炎",
          "病毒性心肌炎",
        ],
        speciality:
          "儿内科疾病如：感染性疾病（肺炎、支气管炎、扁桃体炎、胃肠炎等）手足口病（发热、疱疹、呕吐）、上呼吸道感染（发热、咳嗽、流涕、鼻塞）、支气管炎、肺炎（发热、咳嗽、胃口差）、哮喘（慢性咳嗽、气急、气喘）、急性喉炎（声音嘶哑、犬吠咳嗽）、鼻窦炎、鼻炎（反复咳嗽、鼻塞、鼻涕、鼻痒）、湿疹（过敏、皮疹）、慢性咳嗽（过敏、抵抗力差）、脑炎（抽搐、头痛、呕吐）、秋季腹泻、急性胃肠炎（呕吐、腹泻、脱水）、儿童急腹症（腹痛、便血、呕吐）、贫血（面色苍白）、血小板减少（皮肤出血点）、川崎病（发热、皮疹、淋巴结肿大、球结膜充血、杨梅舌）等，尤其是儿童急诊危重症的救治，如溺水、急性中毒、爆发性心肌炎等。",
        curriculumVitae:
          "宁铂涛，上海交通大学博士生导师（兼专业学位博导），主任医师，医学博士，1977年6月出生，上海交通大学医学院附属上海儿童医学中心PICU副主任。主要科研方向儿童脓毒症的免疫机制研究及儿童其他危重症的临床和基础研究。从事儿内科&儿童危重症临床、科研和教学工作16年。擅长各种儿内科疾病，尤其是严重脓毒症、多器官功能障碍综合征等各种危重疾病的救治，在重症监护及体外膜肺氧合（ECMO）技术等高级生命支持技术方面具有丰富临床经验。获得2010-2011年度香港大学郑裕彤奖学金，在香港大学医学院以research fellow身份进行博士后研究。    发表SCI论文36篇，中华等核心期刊论文28篇。获得2016年上海杰出青年医学人才计划，2015年浙江省新世纪151第三层次人才计划。担任Frontiers in Microbiology、World Journal of Pediatric、《中华急诊医学杂志》及《中国小儿急救医学》审稿专家，《中国小儿急救医学》通讯编委，《临床儿科杂志》青年编委。    主持国家级和省部级课题9项（其中国家自然基金项目2项）。获得国家发明专利1项（专利号：ZL 2017 1 0628310.1）。作为牵头单位联系人完成全国多中心（63家单位）临床研究1项“中国PICU儿童脓毒症的横断面研究”。另外作为主要参与人参与国家自然科学基金项目2项、省重点课题2项和省自然基金项目2项。学术任职：中华医学会儿科急救学组青委会副组长、上海市免疫学会感染免疫专委会委员、中国医学救援协会儿科救援分会事故灾难委员会委员、中国医师协会儿童重症医师分会感染组委员、中华医学会儿科急救学组镇静镇痛协作组委员、国家自然科学基金函审专家、上海市科委项目评议专家库成员、教育部科技司高校系统科技评审专家成员、教育部学位中心博士/硕士学位论文评审专家。人才计划：上海杰出青年医学人才和浙江省新世纪151第三层次人才。",
      },
    };
  },
  computed: {
    ...mapState(["profile"]),
    specialityBrief() {
      if (this.doctorInfo) {
        return (
          this.doctorInfo.speciality.split("").slice(0, 90).join("") + "..."
        );
      }
    },
    curriculumVitae() {
      if (this.doctorInfo) {
        return this.doctorInfo.intro.split("").slice(0, 90).join("") + "...";
      }
    },
  },
  methods: {
    ...mapMutations(["openMessage"]),

    openRegistration() {
      if (!this.$store.state.profile) {
        eventBus.$emit("openSnackbar", "未登录，登录后可预约");
      } else {
        if (!this.$store.state.profile.isDoctor) {
          eventBus.$emit("openRegistration", this.doctorInfo);
        } else if (this.$store?.state?.profile?.isDoctor) {
          eventBus.$emit(
            "openSnackbar",
            "医生账号不可预约，如有需要请切换用户账号"
          );
        } else {
        }
      }
    },
  },
};
</script>



<style lang="scss" scoped>
</style>
